<template>
    <div class="edit">
<!--      contenteditable-->
        <pre class="edit-view" v-html="handleValue">
        </pre>
        <textarea ref="textarea" @keyup="textareaKeyUp" v-model="value" name="edit" id="" wrap="hard" class="textarea-edit scroll">
            {{ value }}
        </textarea>
<!--        <codemirror-->
<!--            ref="mycode"-->
<!--            v-model="curCode"-->
<!--            :options="cmOptions"-->
<!--            @changes="changes"-->
<!--            class="code textarea-edit scroll"-->
<!--        >-->
<!--        </codemirror>-->

    </div>
</template>

<script>
    import EditDomBeautify from '@/utils/editDomBeautify/idnex'
    import '@/assets/l-edit-style.scss' // md 编辑区样式

    let editDomBeautify = new EditDomBeautify()
    export default {
        data() {
            return {
                // 编辑区 md 代码
                value: '',
                // 美化后的编辑区 代码
                handleValue: '',
            }
        },
        watch: {
            value: {
                handler (newVal) {
                    editDomBeautify.setBeautifyStr(newVal, ({fragment, fragmentStr}) => {
                        this.handleValue = fragmentStr
                    })
                },
                immediate: false,
            }
        },
        methods: {
            textareaKeyUp() {
                // console.log(this.$refs['textarea'].value);

                let { value } = this
                // console.log(value)
                this.$emit('keyUpValue', value);
                // this.$emit('keyUpValue', this.$refs['textarea'].value);
            }
        }
    }
</script>

<style scoped>

    .edit {
        position: relative;
        display: block;
        width: 100%;
        /*height: 100%;*/
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    .textarea-edit {

        /*color: transparent;*/
        /*text-fill-color: transparent;*/
        -webkit-text-fill-color: transparent; /* 光标可显示 */
        background: none;
            /*height: 100%;*/
        /* background-color: #1d1e22; */
        resize: none;
        /*color: #000;*/
        border: none;
        /*color: #fff;*/
        /*height: 100vh;*/
        outline: none;
    }

    .edit-view,
    .textarea-edit
    {
        position: absolute;
        left: 0; top: 0;
        padding: 10px;
        width: 100%;
        height: calc(100vh - 54px);
        text-align: left;
        box-sizing: border-box;

        margin: 0;
        border: 0;
        font-size: 14px;
        line-height: 18px;
        white-space: pre-wrap;
        word-break: keep-all;
        overflow-wrap: break-word;
        font-family: inherit;

    }

    .edit-view {
        color: #333;
    }

    /*/deep/ .textarea-edit .CodeMirror {*/
    /*    height: calc(100vh - 54px);*/
    /*}*/
</style>
